<template>
	<div id="nav">
		<img src="../../assets/logo.png" class="logo" alt="">
		<ul>
			<li v-for="(nav1, index) in navlist">
				<a href="javascript:void(0)" v-if="nav1.path" @click="linkTo(nav1.path)">{{nav1.menuName}}</a>
				<a v-else>{{nav1.menuName}}</a>
				
				<ul v-if="nav1.children.length>0 && nav1.children[0].menuType != 'F'">
					<li v-for="(nav2, idx) in nav1.children">
						<a href="javascript:void(0)" v-if="nav2.path" @click="linkTo(nav2.path)">{{nav2.menuName}}</a>
						<a v-else>{{nav2.menuName}}</a>
						<ul v-if="nav2.children.length>0 && nav2.children[0].menuType != 'F'">
							<li v-for="(nav3, i) in nav2.children">
								<a href="javascript:void(0)" @click="linkTo(nav3.path)">{{nav3.menuName}}</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<section class="nav-menu-wrapper">
			<template v-if="loginUser">
				<div>
					<el-popover
					    placement="bottom"
					    title="客服热线"
					    width="200"
					    trigger="click"
					    content="0283283743">
					    <span slot="reference" class="iconfont icon-tel-fill"></span>
					</el-popover>
				</div>
				<span class="iconfont icon-xiaoxi-fill" @click="showMsgDialog"></span>
				<span class="iconfont icon-mine-fill" @click="showMyDialog"></span>
				<span class="iconfont icon-logout" @click="logout"></span>
			</template>
			<template v-else>
				<el-link class="login-link" :href="ssoUrl">
					登录
				</el-link>
				<el-link class="login-link" href="javascript:void(0)" @click.native="regist">注册</el-link>
			</template>
		</section>
		
		<!-- 我的消息弹窗 -->
		<el-dialog title="我的消息" width="40%" :visible.sync="msgDialogVisible" :append-to-body="true">
			<div class="messagebox-dialog-container">
				<el-row type="flex" justify="end">
					<el-col :span="3">
						<el-button type="primary" size="small" :disabled="!selectingList.length">清除未读</el-button>
					</el-col>
					<el-col :span="3">
						<el-button type="primary" size="small" :disabled="!selectingList.length"
							@click="removeMsg">批量删除</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-table :data="msgList" size="small" :cell-style="{ padding: '0px'}" @selection-change="rowSelect">
						<el-table-column type="selection" align="center"/>
						<el-table-column label="通知事项" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.readStatus == 0" class="msg-type unread"
									@click="readed(scope.row)">
									<router-link target="_blank" :to="{path:'/'+scope.row.eventUrl}">
										{{msgTypes[scope.row.noticeType]}}
									</router-link> 
								</span>
								<span v-else class="msg-type">
									<router-link target="_blank" :to="{path:'/'+scope.row.eventUrl}">
										{{msgTypes[scope.row.noticeType]}}
									</router-link> 
								</span>
							</template>
						</el-table-column>
						<el-table-column label="编号" prop="processNum" align="center"/>
						<el-table-column label="时间" prop="createTime" align="center"/>
						<el-table-column label="操作" align="center" >
							<template slot-scope="scope">
								<el-button @click="removeMsg(scope.row)" type="text" slot="reference">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-row>
				<!-- 分页 -->
				<p>
					<el-pagination background layout="total,  prev, pager, next, jumper"
						:current-page="searchFormData.pageNo"
						:page-size="10"
						:total="searchFormData.total" 
						@current-change="currentPageChange"
					  />
				</p>
			</div>
		</el-dialog>
		
		<!-- 个人中心弹窗 -->
		<el-dialog title="个人中心" :visible.sync="myDialogVisible" width="30%" :append-to-body="true">
			<el-form ref="form" label-width="170px" size="mini">
				<el-form-item label="账号名称">
					<el-input v-model="myInfo.userName" :disabled="true"/>
				</el-form-item>
				<el-form-item label="账号密码">
					<el-input v-model="myInfo.password" type="password" placeholder="请输入新密码,留空表示不修改密码"/>
				</el-form-item>
				<el-form-item label="集团名称">
					<el-input v-model="myInfo.groupName" :disabled="true"/>
				</el-form-item>
				<el-form-item label="公司名称">
					<el-input v-model="myInfo.companyName" :disabled="true"/>
				</el-form-item>
				<el-form-item label="企业统一社会信用代码">
					<el-input v-model="myInfo.enterprise" :disabled="true"/>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="myInfo.realName"/>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="myInfo.email"/>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="myInfo.phonenumber"/>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="myDialogVisible = false">取 消</el-button>
				<el-button type="primary" size="small" @click="saveMyInfo">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'navBar',
		data() {
			return {
				ssoUrl: '',
				msgDialogVisible: false, //消息列表是否显示
				myDialogVisible: false, //个人中心是否显示
				myInfo: {},
				searchFormData: {
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				// 主页： /#/home
				// 应用中心： /#/app-store
				// 购物车：/#/shop-cart
				// 订单管理
				//  售出订单：/#/order-sell
				//  购买订单：/#/order-buy
				// 店铺管理：/#/shop-manage
				// 个人中心
				//  收藏管理：/#/user-collect
				// 系统管理
				//  店铺审核：/#/shop-check
				//  应用审核： /#/app-check
				//  行业分类管理：/#/sys-industry
				navlist: [
					{ menuName: '首页',  path: '/home', children:[] },
					{ 
						menuName: '工业应用商店' ,
						children: [
							{ menuName: '应用中心',  path: '/appStore?path=app-store', children:[] },
							{ menuName: '购物车',  path: '/appStore?path=shop-cart', children:[] },
							{ 
								menuName: '订单管理', 
								children: [
									{ menuName: '售出订单',  path: '/appStore?path=order-sell', children:[] },
									{ menuName: '购买订单',  path: '/appStore?path=order-by', children:[] },
								]
							},
							{ menuName: '店铺管理',  path: '/appStore?path=shop-manage', children:[] },
							{
								menuName: '个人中心', 
								children: [
									{ menuName: '收藏管理',  path: '/appStore?path=user-collect', children:[] }
								]
							},
							{
								menuName: '系统管理', 
								children: [
									{ menuName: '店铺审核',  path: '/appStore?path=shop-check', children:[] },
									{ menuName: '应用审核',  path: '/appStore?path=app-check', children:[] },
									{ menuName: '行业分类管理',  path: '/appStore?path=sys-industry', children:[] }
								]
							}
						]
					},
					{ 
						menuName: '开发者社区',
						children: [
							{ menuName: '开发者论坛',  path: '/devCommunity', children:[] },
							{ menuName: '开发者认证',  path: '/devWorkOrderManagement', children:[] },
							{ menuName: '开发者认证模板管理',  path: '/devCertInfoManagement', children:[] }
						]
					},
					{ menuName: '工单管理',  path: '/workorderManagement', children:[] },
					{
						menuName: '租户管理',  
						children: [
							{ menuName: '多租户管理',  path: '/tenantManagement', children:[] },
							{ menuName: '组织用户管理',  path: '/userManagement', children:[] },
							{ menuName: '角色权限管理',  path: '/roleManagement', children:[] }
						]
					},
					{
						menuName: '资源管理',  
						children: [
							{ menuName: '我的资源',  path: '/myResources', children:[] },
							{ menuName: '资源申请',  path: '/resApplyWorkOrderManagement', children:[] },
							{ menuName: 'IaaS资源',  path: '/resourcesManagement', children:[] }
						]
					},
					{ menuName: '文档管理',  path: '/docManagement', children:[] },
					{ menuName: '帮助中心',  path: '/helpCenter', children:[] }
				],
				msgList: [],
				msgTypes: {
					0 : '工单管理',
					1 : '资源管理',
					2 : '开发者认证',
					3 : '账号审批'
				},
				selectingList: [], //选中的列表
			}
		},
		created() {
			console.log('NavBar created');
			// console.log(this.loginUser);
			this.ssoUrl = `${API.SSO_URL}?response_type=code&client_id=EIP&redirect_uri=${API.EIIP_URL}`
			if(this.loginUser) {
				this.navlist = this.loginUser.menus;
			}
		},
		methods: {
			logout() { //登出
				this.$http({
					url: '/api/logoff'
				}).then( res => {
					this.$store.dispatch('logout')
					sessionStorage.clear()
					//重新跳转首页
					location.href = `${API.EIIP_URL}` 
				})
			},
			linkTo(path) { //重复路由点击，则强制刷新页面
				console.log('linkTo',path, this.$route.fullPath);
				if (path == this.$route.fullPath) {
					this.$router.go(0)
				} else {
					this.$router.push(path)
				}
			},
			currentPageChange(pageNum) { //当前页发生变化
				this.searchFormData.pageNum = pageNum
				this.loadMsgList()
			},
			rowSelect(list) {
				this.selectingList = list;
			},
			readed(row) {
				this.$http({
					url: `/api/notice/read/${row.noticeId}`
				}).then( res => {
					row.readStatus = 1;
				})
			},
			regist() {
				console.log('跳转注册页', '/register')
				this.$router.push('/register')
			},
			removeMsg(row) { //删除消息
				let msgIds = null
				if(row.noticeId) { //单个删除
					msgIds = row.noticeId; 
				} else { //批量删除
					msgIds = this.selectingList.map(item=>item.noticeId).join(",");
				}
				this.$http({
					url: `/api/notice/delete/${msgIds}`
				}).then( res => {
					this.loadMsgList()
				})
			},
			showMsgDialog() { //打开消息弹窗
				this.loadMsgList()
				this.msgDialogVisible = true;
			},
			showMyDialog() { //打开个人中心弹窗
				this.loadMyInfo();
				this.myDialogVisible = true;
			},
			loadMsgList() {
				this.$http({
					url: `/api/notice/list`,
					method: 'POST',
					data: this.searchFormData
				}).then( res => {
					console.log(res);
					this.msgList = res.data.rows;
					this.searchFormData.total = res.data.total;
				})
			},
			loadMyInfo() {
				this.$http({
					url: `/api/user/profile/list`,
				}).then( res => {
					this.myInfo = res.data.data;
					console.log(res.data);
				})
			},
			saveMyInfo() {
				this.$http({
					url: '/api/user/profile/update',
					method: 'POST',
					data: this.myInfo
				}).then( res => {
					if(res.data.code == 200) {
						console.log(res);
						this.myDialogVisible = false;
					} else {
						this.$message.error(res.data.msg)
					}
				})
			}
		},
		computed: {
			loginUser() {
				return this.$store.state.loginUser
			}
		},
		watch: {
			loginUser(newVal) {
				if(newVal) {
					//当store中有了loginUser，重新渲染菜单列表
					console.log('loginUser watching.....', newVal);
					this.navlist = newVal.menus;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#nav {
		z-index: 999;
		position: relative;
		height: 80px;
		background-color: black;
		display: flex;
		align-items: center;
		padding: 0 30px;
		justify-content: space-between;
		.logo {
			height: 36px;
		}
		ul {
			li:hover {
				background-color: #409EFF;
				color: white;
			}
		}
		> ul { /*一级菜单*/
			display: flex;
			list-style: none;
			height: 100%;
			align-items: center;
			> li {
				padding: 5px 20px;
				font-size: 18px;
				position: relative;
				> ul { /*二级菜单*/
					display: none;
					position: absolute;
					top: 100%;
					left: 0; right: 0;
					background-color: black;
					font-size: 14px;
					> li {
						padding: 10px 10px;
						position: relative;
						> ul { /*三级菜单*/
							display: none;
							position: absolute;
							left: 100%; 
							width: 70%;
							transform: translateY(-29px);
							background-color: black;
							font-size: 13px;
							li {
								padding: 8px 9px;
							}
						}
						&:hover > ul {
							display: block;
						}
					}
				}
				&:hover > ul {
					display: block;
				}
			}
			a {
				text-decoration: none;
				color: #ffffff;
			}
		}
		
		> .nav-menu-wrapper {
			width: 150px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.iconfont {
				font-size: 22px;
				color: white;
				cursor: pointer;
			}
			.login-link {
				color: white;
				font-size: 18px;
				&:hover {
					&::after {
						border-bottom: 1px solid white;
					}
				}
			}
		}
	}
	
	.msg-type {
		display: block;
		position: relative;
		&.unread::before {
			content: '';
			display: block;
			width: 6px; 
			height: 5px;
			border-radius: 3px;
			background-color: red;
			position: absolute;
			left: 16px;
			top: calc( 50% - 3px);
		}	
	}
	.messagebox-dialog-container {
		min-height: 300px;
	}
</style>